﻿
<template>
  <div
    class="header-bar-module"
    :style="{
      'border-bottom': title && showBorder ? '0.5px solid #ebedf0' : null,
      opacity: opacity === 0 ? null : opacity,
      background: bgColor
    }"
  >
    <div class="left">
      <div
        class="left_arr"
        @click="goBack"
      ></div>
    </div>
    <div class="center">
      <div
        v-show="
          !headerStyle ||
            headerStyle === 1 ||
            (headerStyle === 2 && scrollHeight > 0)
        "
        class="page-title"
        :style="{ 'max-width': maxTitleWidth }"
      >
        {{ title }}
      </div>
    </div>
    <div class="right">
      <div class="right-content">
        <div
          v-if="isShare"
          class="share"
          @click="openShare"
        ></div>
        <div
          v-if="showRule"
          class="right-rule"
          :style="{ color: textColor }"
          @click="openRulePage"
        >
          规则
        </div>
      </div>
    </div>
    <share-module ref="sharecomponent" />
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import tool from '@/util/tool'
import ShareModule from './ShareModule'
import ua from '@/util/ua'
import leaveMixin from '@/pages/mobile/Mixin/leave'

export default {
  name: 'HeaderBarModule',
  components: {
    ShareModule,
  },
  mixins:[leaveMixin],
  props: {
    scrollHeight: {
      type: Number,
      default:0
    },
    redirectURL: {
      type: String,
      default:''
    },
    activityCode: {
      type: String,
      default:''
    }
  },
  data () {
    return {
      opacity: 0,
      bgColor: 'rgba(0,0,0,0)',
      leftBackIcon: null, 
      shareIcon: null,
      textColor: '#FFFFFF'
    }
  },

  computed: {
    ...mapGetters('main', ['pageContent']),
    ...mapGetters('server', ['serverUa','userNo']),
    pageData () {
      const model = this.pageContent.componentList.find(
        (a) => a._id === 'rule-'+this.activityCode
      )
      return { ...model }
    },
    showBorder () {
      return (
        !this.headerStyle ||
        this.headerStyle === 1 ||
        (this.headerStyle === 2 && this.scrollHeight > 0)
      )
    },
    maxTitleWidth () {
      if (process.browser){
        return document.body.clientWidth * 0.52 + 'px'
      }
      return 375 * 0.4+ 'px'
    },
    title () {
      return this.pageContent.title
    },
    headerStyle () {
      return this.pageContent.headerStyle
    },
    showRule () {
      return this.pageContent.ruleButton?.show && this.pageData.ruleVisible
    },
    isShare () {
      return this.pageContent.isShare && (tool.IS_NATIVE() || process.server)
    },
    paddingTop () {
      let xup=process.browser?ua.isIphoneXup:this.serverUa.isIphoneXup
      let isAndroid=process.browser?ua.isAndroid:this.serverUa.isAndroid
      if (isAndroid) {
        return null
      } else if (xup) {
        return 34 / 50 + 'rem'
      } else {
        return 17 / 50 + 'rem'
      }
    },
  },
  watch: {
    scrollHeight (value) {
      let _this = this
      if (!this.headerStyle || this.headerStyle === 1) {
        return
      }
      if (value < 0) {
        return
      }

      let stand = 48
      if (value === 0) {
        _this.opacity = 0
        _this.bgColor = 'rgba(0,0,0,0)'
        _this.textColor = '#FFFFFF'
      } else {
        let temp = (Number(value) + Number(5)) / stand
        _this.opacity = temp >= 1 ? 1 : temp
        _this.bgColor = '#FFFFFF'

        _this.textColor = 'rgba(51, 51, 51, 1)'
      }
    },
    pageContent () {
      this.initStyle()
    }

  },
  
  created(){
    // 服务端渲染需要
    this.initStyle()
  },
  mounted () {
    if (tool.IS_NATIVE() && window.App) {
      this.initStyle()
      window.App.call('setHeaderVisible', {
        data: {
          visible: 'F',
        },
      })
    }
  },
  methods: {
    ...mapMutations('main', ['editComponent','editPage']),
    openRulePage () {
      tool.sendQdas({
        eventId: '8888111701',
        customAttributes: {
          activity_code: this.activityCode,
          item_name: '规则-点击'
        }
      })
      this.$router.push({ path: '/mobile/rule', params: { activityCode: this.activityCode } })
    },
    goBack () {
      console.log('===back 点击====')
       
      if (this.pageContent.showCouponPop && this.userNo){
        console.log('===back 点击====处理弹窗')
        this.handleLeavePage()
      } else {
        tool.appBack()
      }
      
    },
    openShare () {
      this.$refs.sharecomponent.openPopup()
    },
    initStyle () {
      let _this = this
      if (_this.headerStyle === 2) {
        // 透明导航栏
        _this.opacity = 0
        _this.bgColor = 'rgba(0,0,0,0)'
        _this.textColor = '#FFFFFF'

      } else {
        // 固定白色导航栏
        _this.opacity = 1
        _this.bgColor = '#FFFFFF'
        _this.textColor = 'rgba(51, 51, 51, 1)'
      }
    },
  }
}
</script>
<style lang="less" scoped>

@supports (
    (height: constant(safe-area-inset-top)) or
      (height: env(safe-area-inset-top))
  )
  and (-webkit-overflow-scrolling: touch) {

  /*iphone 8*/
@media only screen and(device-width: 375px) and(device-height: 667px) and(-webkit-device-pixel-ratio:2) {
  
  .header-bar-module {
    padding-top: 17px;
     
  }
}
  /*iphone x*/
  @media only screen and(device-width: 375px) and(device-height: 812px) and(-webkit-device-pixel-ratio:3) {
    
    .header-bar-module {
      padding-top: 34px;
    }
  } 
  /* iphone Xr  iphone 11*/
  @media only screen and(device-width: 414px) and(device-height: 896px) and(-webkit-device-pixel-ratio:2) {
    .header-bar-module {
      padding-top: 34px; 
    }
  } 
  /* iphone xs max / 11 pro max */
  @media only screen and(device-width: 414px) and(device-height: 896px) and(-webkit-device-pixel-ratio:3) {
    .header-bar-module {
      padding-top: 34px; /* iOS 11.0 */
    }
  }
   /* iphone 12 */
  @media only screen and(device-width: 390px) and(device-height: 844px) and(-webkit-device-pixel-ratio:3) {
    .header-bar-module {
      padding-top: 34px; /* iOS 11.0 */
    }
  }

    /*iphone12mini */
@media only screen and(device-width: 320px) and(device-height: 693px) and(-webkit-device-pixel-ratio:3) {
  
  .header-bar-module {
    padding-top: 34px;
     
  }
}
    /*iphone12max */
@media only screen and(device-width: 428px) and(device-height: 926px) and(-webkit-device-pixel-ratio:3) {
  
  .header-bar-module {
    padding-top: 34px;
     
  }
}
}


.header-bar-module {
  height: 48px;

  width: 100%;
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  // padding-top: 17px;

  .left {
    flex: 1;
    display: flex;
    align-items: center;

    .left_arr {
      width: 29px;
      height: 29px;
      margin-left: 15px;
      background-size: 100% 100%;
      background-image: url(~@/assets/image/headerBar/left_arr.png);
    }
  }

  .center {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    .page-title {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .right-rule {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      margin-left: 10px;
    }
    .share {
      width: 29px;
      height: 29px;
      background-size: 100% 100%;
      background-image: url(~@/assets/image/headerBar/share.png);
    }

    .right-content {
      margin-right: 15px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
